<template>
  <div class="bg">
    <div class="back_box">
      <div class="back_btn">
        <van-icon
          @click="backHandler"
          v-show="true"
          name="arrow-left"
          size="22"
          color="#fff"
          class="back"
        />
      </div>
      <div class="back_text">待发货</div>
    </div>
    <!-- 订单状态 -->
    <div class="cantiant">
      <div style="
          display: flex;
          color: #fff;
          align-items: center;
          line-height: 50px;
          justify-content: space-between;
        ">
        <div style="display: flex; align-items: center">
          <van-icon
            name="clock-o"
            color="#fff"
            size="22"
            style=""
          />
          <div style="margin-left: 7px; font-size: 17px">
            {{dataInfo.state_text}}
          </div>
        </div>
        <div style="font-size: 12px">预计2022-10-25送达</div>
      </div>
      <!-- 快递信息 -->
      <div
        class="logistics"
      >
        <div
          class="logistics-detail"
          style="display: flex; align-items: center; justify-content: space-between;"
        >
          <div>
            <div style="color: #222222; line-height: 30px; font-size: 13px;font-weight: 600;">
              {{"圆通快递"}}：{{"快递揽件"}}
            </div>
            <div style="display: flex">
              <div style="font-size: 12px; color: #333333">
                {{"等待快递上门取件"}}
              </div>
            </div>
          </div>
          <div style="color: #6f6f6f; margin-left: 4.5vw">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <!-- 个人地址 -->
      <div class="logistics">
        <div class="logistics-detail">
          <div style="display: flex;border-bottom: 1px solid #e7e7e7;line-height: 40px;">
            <div>{{ address.name }}</div>
            <div style="color: #666666; padding-left: 10px;font-size: 14px;">
              {{ address.mobile }}
            </div>
          </div>
          <div style="color: #333333; font-size: 14px; padding: 10px 0">
            {{ address.address_name }}{{ address.address }}
          </div>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="info goods-info">
        <div class="myteam_title">
          <span>商品信息</span>
        </div>
        <div class="goods-detail" v-for="goods in goodsinfo" :key="goods.id">
          <div style="">
            <img
              :src="goods.image"
              alt=""
              style="width: 75px; height: 75px; border-radius: 10px"
            />
          </div>
          <div class="text-info">
            <div style="font-size: 13px">
              {{ goods.title }}
            </div>
            <div style="font-size: 12px; line-height: 20px; color: #999999">
              数量：{{ goods.number }}
            </div>
            <div style="font-size: 13px; color: #222222">
              ￥{{ goods.price }}
            </div>
          </div>
        </div>
        <div class="goods-money">
          共{{ pay.number }}件商品，<span style="color: #222222">合计：</span>
          <span style="color: #fe4b20">￥{{ pay.price }}</span>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="info order-info">
        <div
          class="myteam_title"
          style="border-bottom: 1px solid #e7e7e7; line-height: 45px"
        >
          <i></i><span>订单信息</span>
        </div>
        <div class="detail">
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 30px">订单编号</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.order_no }}</span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 30px">下单时间</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.createtime_text}}</span>
          </div>
          <div
            style="display: flex; justify-content: space-between"
          >
            <span style="color: #333333; line-height: 30px">支付方式</span>
            <span style="color: #999999; line-height: 30px">
              {{ pay.pay_type_text }}</span>
          </div>
          <div
            style="display: flex; justify-content: space-between"
          >
            <span style="color: #333333; line-height: 30px">配送方式</span>
            <span style="color: #999999; line-height: 30px">
              {{ "圆通物流" }}</span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 40px; min-width: 50px">备注</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.remarks }}</span>
          </div>
        </div>
      </div>
      <!-- 商品费用 -->
      <div  class="info order-info"  >
        <div class="detail">
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 30px">商品总额</span>
            <span style="color: #fe362f; line-height: 30px">
              ￥{{pay.total_amount }}</span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 30px">运费</span>
            <span style="color: #999999; line-height: 30px">
              +￥{{ pay.freight_price }}</span>
          </div>
          <div style="display: flex;justify-content: space-between;border-bottom: 1px solid #e7e7e7;">
            <span style="color: #333333; line-height: 30px">优惠</span>
            <span style="color: #999999; line-height: 30px">
              -￥{{ pay.discount_price }}</span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 40px">合计</span>
            <span style="color: #fe362f; line-height: 40px">
              ￥{{pay.total_amount }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 按钮集合 -->
    <div class="button-info">
      <div class="button" > 申请转户</div>
      <div class="button" style="border: 1px solid #D1D2D5;color: #999999;" > 取消订单 </div>
    </div>
  </div>
</template>

<script>
import { shopOrderDetail } from "@/api/api";
export default {

  data() {
    return {
      id: "",
      dataInfo: {},
      address:{},
      pay:{},
      goodsinfo:[],
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.initData();
  },
  methods: {
    backHandler() {
      this.$router.go(-1);
    },
    initData() {
      shopOrderDetail({ order_id: this.id })
        .then((res) => {
          if (res.data.code == 1) {
            this.dataInfo = res.data.data;
            let {pay,address,goodsinfo} = res.data.data;
            this.pay = pay || {}
            this.address = address || {}
            this.goodsinfo = goodsinfo || []
          }
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
body {
  background: #f2f3f7 !important;
  height: 100vh !important;
}
</style>
<style scoped>
.bg {
  background: linear-gradient(180deg, #ee4034 0%, #f8f8f8 50%, #f8f8f8 100%);
  height: 100vh;
  overflow: scroll;
}
.cantiant {
  padding: 5vw 3vw;
  padding-bottom: 100px;
}
.logistics {
  background: #fff;
  padding: 10px 15px;
  margin-bottom: 3vw;
  line-height: 26px;
  border-radius: 8px;
}
.myteam_title {
  margin-bottom: 10px;
  display: flex;
}
.myteam_title span {
  font-size: 15px;
  display: block;
  color: #222222;
  font-weight: bold;
}
.info {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 3vw;
  margin-bottom: 3vw;
  border-radius: 10px;
  padding-bottom: 0px;
}
.goods-info .goods-detail {
  display: flex;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  padding: 10px 0;
  border-radius: 10px;
}
.goods-info .goods-detail .text-info {
  margin-left: 3vw;
  line-height: 8vw;
}
.goods-info .goods-money {
  font-size: 3.3vw;
  color: #ccc;
  padding: 10px 0;
  text-align: right;
}
.order-info .detail {
  font-size: 14px;
  /* padding: 2vw 3vw; */
}
.button-info {
  /* display: flex;
  position: relative;
  width: 86vw; */
  background: #fff;
  height: 9vw;
  padding: 20px 10px;
  position: fixed;
  bottom: 0px;
  width: 100vw;
}
.button {
  /* position: absolute; */
  display: inline-block;
  color: #ff491f;
  border: 1px solid #ff491f;
  height: 8vw;
  width: 25vw;
  line-height: 8vw;
  border-radius: 4vw;
  text-align: center;
  float: right;
  /* margin-left: 10px; */
  margin-right: 20px;
  /* margin-left: 60vw; */
}

.popup {
  margin: 5vw 6vw;
}
.popup-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 2vw 0;
}
.popup-tip {
  background: #f9f9f9;
  padding: 3vw;
  line-height: 7vw;
  color: #737373;
}
.cancel-reason {
  line-height: 15vw;
}
.cancel-reason .cancel-title {
  font-size: 18px;
}
.cancel-reason .list {
  margin: 2vw 0;
  color: #737373 !important;
}
.van-radio__label {
  color: #737373 !important;
}
.popup-button {
  height: 5vh;
  background: #fe4b20;
  color: #fff;
  font-size: 20px;
  width: 80vw;
  margin: 0vh auto;
  line-height: 5vh;
  text-align: center;
  border-radius: 2.5vh;
}
#app {
  background-color: #f2f3f7 !important;
  height: 100vh !important;
}
</style>
<style scoped>
#app {
  background-color: #f2f3f7 !important;
  height: 100vh !important;
}

body {
  background: #f2f3f7 !important;
  height: 100vh !important;
}
.back_box {
  background-color: transparent !important;
  width: 100vw;
  height: 13.33vw;
  line-height: 13.33vw;
  display: flex;
  justify-content:center;
  border-bottom: 1px solid #fff;
  position: relative;
}
.back_btn {
  width: 20vw;
  position: absolute;
  top: 50%;
  left: 0;
  padding-left: 1.33vw;
  transform: translateY(-50%);
}
.back_btn img {
  width: 2.9vw;
  height: 5.8vw;
}
.back_text {
  font-size: 4.8vw;
  text-align: center;
  color: #fff;
}
.back_text1 {
  font-size: 4.8vw;
  float: right;
  margin-right: 3vw;
  width: 20vw;
}
</style>
